<template>
  <div class="child">
    <div class="child_title">
      <div><span>购物车</span> <span class="bule" @click="$store.commit('clear')">清空</span></div>
    </div>

    <div class="child_main">
      <div
        class="main_menu"
        v-for="child in $store.getters.shopcarlist"
        :key="child.id"
      >
        <span>{{ child.name }}</span>
        <div>
          <!-- 价格 -->
          <span class="price">
            &yen;{{ (child.price * child.num).toFixed(2) }}
          </span>
          <!-- 增加数量 -->
          <span class="Num">
            <span
              @click="$store.commit('addNum', { id: child.id, num: -1 })"
              v-show="child.num > 0"
              ><span>-</span></span
            >
            <p class="quantity" v-show="child.num > 0">{{ child.num }}</p>
            <span @click="$store.commit('addNum', { id: child.id, num: 1 })"
              >+</span
            >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class child extends Vue {


}
</script>

<style scoped lang="scss">
.child {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;

  height: 100%;
}
//头部
.child_title {
  width: 100%;
  height: 40px;

  background-color: #f3f5f7;
  position: fixed;
  & > div {
    margin: auto;
    display: flex;
    justify-content: space-between;
    // flex-direction: column;
    align-items: center;
    height: 40px;
    width: 90%;
    font-size: 12px;
    background-color: #f3f5f7;

    .bule {
      color: #00a0dc;
    }
  }
}

//内容
.child_main::-webkit-scrollbar {
  display: none;
}
.child_main {
  flex: 1;
  overflow-y: scroll;
  width: 100%;
  padding: 40px 0px 80px;

  .main_menu {
    font-size: 12px;
    margin: auto;
    width: 90%;
    // background-color: rgb(161, 161, 161);
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.price {
  margin-right: 10px;
  color: red;
}
// 加减样式
.Num {
  // background-color: rgb(173, 32, 32);
  display: inline-block;
  height: 24px;

  span {
    display: inline-block;

    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    // vertical-align: baseline;
    background-color: rgb(255, 195, 0);
    color: #fff;
    text-align: center;
    border-radius: 50%;
  }
  .quantity {
    display: inline-block;
    // width: 20px;
    height: 18px;
    margin: 0 5px;
    vertical-align: middle;
  }
  & > span:nth-of-type(1) {
    // line-height: 20px;

    span {
      vertical-align: top;
      // color: rgb(158, 68, 68);
      // margin-top: -1px;
      box-sizing: border-box;
      border: 1px solid rgb(255, 195, 0);
      background: rgb(255, 255, 255);
      color: rgb(255, 195, 0);
      line-height: 16px;
      font-weight: bold;
    }
  }
}
</style>